<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>图片管理</title>
</head>
<body>
<div id="app">

    <h3 style="text-align: center">图片管理</h3>

    <div style="text-align: center">
        <el-dialog title="上传图片" :visible.sync="isShow">
            <template>
                <el-upload v-if="isShow"
                           class="upload-demo"
                           drag
                           action="/img/upload"
                           :on-success="uploadSuccess"
                           :on-error="uploadError"
                           multiple>
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                </el-upload>
            </template>
        </el-dialog>
    </div>

    <div style="text-align: center;padding-bottom: 30px" >
        <el-button style="margin-left: 10px;" size="small" type="success" @click="isShow=!isShow">打开上传</el-button>
    </div>

    <div style="text-align: center">
        <el-table v-loading="loading"
                :data="imgList"
                border
                style="width: 100%">
            <el-table-column
                    fixed
                    type="index"
                    :index="indexMethod"
                    label="编号"
                    align="center"
                    width="100">
            </el-table-column>

            <el-table-column
                    prop="imgName"
                    label="图片"
                    align="center"
            >
                <template slot-scope="scope">
                    <!--                <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>-->
                    <!--                <el-button type="text" size="small">编辑</el-button>-->
                    <img width="120px" height="70px" :src="'https://file.qaqavr.com/'+scope.row.imgName">
                </template>

            </el-table-column>

            <el-table-column
                    prop="imgName"
                    label="图片名称"
                    show-overflow-tooltip="true"
                    align="center"
                    >
            </el-table-column>

            <el-table-column
                    prop="loginName"
                    label="上传账号"
                    show-overflow-tooltip="true"
                    align="center"
            >
            </el-table-column>

            <el-table-column
                    prop="createTime"
                    align="center"
                    label="上传时间"
            >
            </el-table-column>
            <el-table-column
                    fixed="right"
                    align="center"
                    label="操作"
            >
                <template slot-scope="scope">
                    <el-button @click="deleteById(scope.row.id)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>

    <div class="pagination-container" style="text-align: center;padding-top: 30px">
        <el-pagination
                class="pagiantion"
                @current-change="handleCurrentChange"
                :current-page="pagination.currentPage"
                :page-size="pagination.pageSize"
                layout="total, prev, pager, next, jumper"
                :total="pagination.total">
        </el-pagination>
    </div>
</div>

<script th:src="@{/axios.min.js}"></script>
<script th:src="@{/vue.js}"></script>

<!-- 引入样式 -->
<link rel="stylesheet" th:href="@{/element-ui.css}">
<!-- 引入组件库 -->
<script th:src="@{/element-ui.js}"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            isShow:false,
            imgList: [],
            loading:true,
            pagination: {//分页相关属性
                currentPage: 1,
                pageSize: 4,
                total: 100,
                queryString: null,
            },
        },
        methods: {
            //上传成功
            uploadSuccess(response, file, fileList){
                this.isShow=false
                if (response.flag){
                    this.findPage()
                    this.$message({
                        message: response.message,
                        type: 'success'
                    });
                } else {
                    this.$message.error(response.message);
                }
            },

            //上传失败
            uploadError(err, file, fileList){
                this.$message.error("上传失败!");
            },

            //自定义索引
            indexMethod(index) {
                return index + 1;
            },

            deleteById(id){
                this.loading=true
              axios.delete("/img/deleteById/"+id).then(resp=>{
                  if (resp.data.flag){
                      this.loading=false
                      this.$message({
                          message: resp.data.message,
                          type: 'success'
                      });
                      this.findPage()
                  } else {
                      this.loading=false
                      this.$message.error(resp.data.message);
                  }
              })
            },

            //切换页码
            handleCurrentChange(currentPage) {
                this.pagination.currentPage = currentPage;
                this.findPage();
            },
            findPage() {
                var param = {
                    currentPage: this.pagination.currentPage,
                    pageSize: this.pagination.pageSize,
                    queryString: this.pagination.queryString
                }
                axios.post("/img/findPage", param).then(resp => {

                    if (resp.data.flag) {
                        this.imgList = resp.data.data
                        this.pagination.total = resp.data.total;
                        this.loading=false
                    } else {
                        this.loading=false
                        this.$message.error(resp.data.message);
                    }
                })
            }
        },
        created() {
            this.findPage()
        }
    })
</script>
</body>
</html>